<template>
  <div class="c-bg-sgray">
    <new-search-bar class="c-bg-white" :searchFixed="true" :searchText ="searchText" @search="startSearch"></new-search-bar>

    <div class="c-ph24 c-pt24">
      <div class="c-bg-white c-ph24 c-mb22 c-pt24 c-br12" v-for="(item, index) in dataList" :key="index">
        <div class="c-bd-b1-f6 c-pb24 c-flex-row" @click="goToSectionDetail(item.rtId)">
          <div class="c-ww180 c-maxh180 c-minh120 c-br12 c-text-hidden">
            <img class="c-w100 c-h" :src="$addXossFilter(item.poster, require('@/assets/defult270.png'))" alt=""/>
          </div>
          <div class="c-pl20 c-flex-grow1 c-w0 c-flex-column c-justify-sb">
            <div class="c-fs24 c-text-ellipsis2">{{item.themeName}}</div>
            <div class="c-fs18 c-fc-gray c-flex-row c-justify-sb c-aligni-center" v-if="item.status == 1">
              <span>{{item.enrollNum}}次预约 | {{item.studyNum}}次学习</span>
              <span class="c-ww120 c-hh48 c-lh48 c-fc-white theme-bg c-br24 c-textAlign-c c-fs22" v-if="item.enrollNum > 0" @click.stop="goToMyReservationList(item.rtId, item.orderId, item.themeName)">预约记录</span>
            </div>
          </div>
        </div>
        <div class="c-flex-row c-justify-sb c-pv24 c-fs20 c-aligni-center">
          <!-- isEnroll 1：已有进行中预约  2： 已购买未预约  3：未购买  -2：已作废   -3：已过期 -->
          <!-- status 【1：正常，-2：作废】 -->
          <!-- sessionRestriction 0 不限制 1 限制其中一个专场 -->
          <!-- timesRestriction 0不限制次数 1限制多少次 2 每个专场限制多少次 -->
          <!-- residueDegree 剩余限制次数 -->
          <span class="c-fc-gray" v-if="item.status == -2">订单已被作废</span>
          <span v-else-if="item.isLastOrder != 1" class="c-fc-gray">当前主题有新订单，请查看</span>
          <span class="c-fc-gray" v-else-if="item.isEnroll == -3">订单已于{{item.endAt}}过期</span>
          <span v-else-if="item.timesRestriction > 0 && item.residueDegree == 0" class="c-fc-gray">预约次数已用完</span>
          <span class="c-fc-gray" v-else>
            <template v-if="item.isEnroll != -3">
              <span class="c-fc-gray" v-if="item.endAt == 0 && item.validDays == 0">长期有效</span>
              <span class="c-fc-gray" v-if="item.endAt == 0 && item.validDays > 0">首次使用{{item.validDays}}天内有效</span>
              <span v-if="item.endAt != 0" class="c-fc-gray">{{item.endAt}}前有效</span>
            </template>
            <!-- 是否设置了预约次数 设置了要展示 -->
            <span class="c-fc-gray c-pl10" v-if="item.timesRestriction > 0">剩余预约次数：{{item.residueDegree == -1 ? '不限' : `${item.residueDegree}次`}}</span>
          </span>
          <span class="theme-fc" v-if="item.isLastOrder == 0 || (item.status == 1 && ((item.isEnroll == 2 && item.enrollMode == 1) || ((item.isEnroll == 1 || item.isEnroll == 2) && item.enrollMode == 2)) && item.residueDegree != 0)" @click="goToSectionDetail(item.rtId)">{{item.isLastOrder != 1 ? '查看主题' : '立即预约'}}</span>
        </div>
      </div>
    </div>
    <loading-status-tem :showLoading="isLoading" :noMoreData="loadingStatus == 'NO_MORE_DATA' && !noneShow" :noData="noneShow" :noDataText="'暂无您的约课信息'">
      <div class="c-fc-white c-lh c-fs32 c-mh24 c-pv28 c-textAlign-c c-br10 c-mt64 theme-bg" v-if="recentRtId && companyAuth.enableReservationModule == 1" @click="goToDetail">立即约课</div>
    </loading-status-tem>
  </div>
</template>
<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import newSearchBar from '@/components/templates/common/newSearchBar.vue'
import { utilJs } from "@/utils/common.js"
export default {
  name: 'reservationClassList',
  components: {
    newSearchBar,
    loadingStatusTem,
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      themeName: localStorage.getItem('themeName') ? localStorage.getItem('themeName') : 'mb5',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      noneShow: true,
      pageIndex: 1,
      pageSize: 10,
      loadingStatus: "NO_MORE_DATA", //显示加载更多LOAD_MORE 加载中 LOADING 没有更多 NO_MORE_DATA
      isLoading: false,
      dataList: [],
      recentRtId: null, // 最新的rtId, 每月可点立即约课用到
      searchText: '',
    }
  },
  computed: {
  },
  methods: {
    goToDetail() {
      // 点击立即约课
      if (!this.recentRtId) {
        return;
      };
      this.$routerGo(this, "push", {
        path: "/homePage/reservation/reservationList"
      });
    },
    getMyReservationList() { // 获取我的约课
      if (!this.isLoading) {
        this.isLoading = true;
        // this.loadingStatus = 'LOADING';
        let $this = this;
        utilJs.getMethod(global.apiurl + 'reservations/getResOrderByUser?page=' + this.pageIndex + '&limit=' + this.pageSize + '&name=' + this.searchText,
          function (res) {
            // $this.recentRtId = res.rtId;
            $this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
            if ($this.pageIndex == 1) {
              $this.dataList = res.data;
            } else {
              $this.dataList = [...$this.dataList, ...res.data];
            }
            if ($this.dataList.length == 0) {
              $this.noneShow = true;
              $this.loadingStatus = "NO_MORE_DATA";
            } else {
              $this.noneShow = false;
            }
            if ($this.dataList.length >= res.total) {
              $this.loadingStatus = "NO_MORE_DATA";
            } else {
              $this.loadingStatus = 'LOAD_MORE';
              $this.pageIndex++
            }
            $this.isLoading = false;
          }
        );
      }
    },
    linkToTicketNum(rtId, reId, status) { // 点击查看票券 status == -2 已作废不可跳转
      if (status == -2) {
        return;
      }
      this.$routerGo(this, "push", {
        path: "/activity/ticketNum",
        query: { activityId: rtId, from: 'reservation', reId: reId }
      });
    },
    goToSectionDetail(rtId) { // 跳转场次详情status == -2 已作废不可跳转
      this.$routerGo(this, "push", {
        path: "/activity/activityDetail",
        query: { ActivityNo: rtId, from: 'reservation' }
      });
    },
    goToMyReservationList(rtId, orderId, themeName) {
      this.$routerGo(this, "push", { path: "/member/myReservation/myReservationList", query: { rtId: rtId, orderId: orderId, themeName: themeName } });
    },
    startSearch(searchText) {
      this.searchText = searchText.searchValue;
      this.pageIndex = 1;
      this.dataList = [];
      this.getMyReservationList();
    },
    //分享
    wechatShare: function () {
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, "我的约课", shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("我的约课", "", shareUrl, "");
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.loadingStatus == 'LOAD_MORE') {
          that.getMyReservationList();
        }
      });
    },
    initData() {
      this.pageIndex = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.dataList = [];
      this.searchText = "";
      this.isLoading = false;
      this.getMyReservationList();
    },
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    setDocumentTitle("我的约课");// eslint-disable-line
    if (utilJs.checkNeedInitData(this.dataList, this.pageIndex)) {
      // this.getMore();
      this.initData()
    }
    // this.getMyReservationList();
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    // this.pageIndex = 1
    // this.dataList = [];
    // this.loadingStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>
<style scoped>
.c-fc-51C57E {
  color: #51c57e;
}
</style>
